import React, { useState } from 'react';
import { Form, Input, Modal, Radio, Select, DatePicker } from 'antd';


const { TextArea } = Input;
const { Option } = Select;

const FormItem = Form.Item;

export interface CreateFormProps {
  treeData?: API.TreeNodeItem[];
  userList: API.UserItem[];
  patrolJobList: API.PatrolJob[];
  modalVisible: boolean;
  onSubmit: (values: API.PatrolRecord) => void;
  onCancel: () => void;
}

const formLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 15 },
};

const CreateForm: React.FC<CreateFormProps> = (props) => {
  const [formVals] = useState<API.PatrolRecord>({
    jobId: undefined,
    patrolUser: undefined,
    comment: '',
    dutyLeaderId: undefined,
    isConform: 1,
    patrolTime: ''
  });

  const [form] = Form.useForm();

  const [jobName, setJobName] = useState('');
  const [leaderName, setLeaderName] = useState('');
  
  const { modalVisible, onSubmit: handleAdd, onCancel, userList, patrolJobList } = props;

  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    if (fieldsValue.patrolTime) {
      fieldsValue.patrolTime = fieldsValue.patrolTime.format('YYYY-MM-DD hh:mm:ss');
    }
    fieldsValue.dutyLeaderName = leaderName;
    fieldsValue.jobName = jobName;
    form.resetFields();
    handleAdd(fieldsValue);
  };

  return (
    <Modal
      width={640}
      destroyOnClose
      title="新增巡检记录"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <Form
        {...formLayout}
        form={form}
        initialValues={{
          jobId: formVals.jobId,
          patrolUser: formVals.patrolUser,
          comment: formVals.comment,
          dutyLeaderId: formVals.dutyLeaderId,
          isConform: formVals.isConform,
          patrolTime: formVals.patrolTime
        }}
      >
        <FormItem
          label="任务名称"
          name="jobId"
          rules={[{ required: true, message: '请选择任务名称！' }]}
        >
          <Select
            showSearch
            placeholder="请选择任务名称"
            onChange={(value: any, option:any) => {
              setJobName(option.children);
            }}
            filterOption={(input, option) =>
              option?.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            {patrolJobList.map((item) => (
              <Option key={item.id} value={item.id ?? ''}>
                {item.jobName}
              </Option>
            ))}
          </Select>
        </FormItem>
        <FormItem
          label="巡检人"
          name="patrolUser"
          rules={[{ required: true, message: '请选择巡检人！' }]}
        >
          <Select
            showSearch
            placeholder="请选择巡检人"
            filterOption={(input, option) =>
              option?.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            {userList.map((item) => (
              <Option key={item.userId} value={item.userId ?? ''}>
                {item.realName}
              </Option>
            ))}
          </Select>
        </FormItem>
        <FormItem
          label="处理意见"
          name="comment"
          rules={[{ required: true, message: '请输入处理意见！' }]}
        >
          <TextArea placeholder="请输入处理意见" showCount maxLength={100} />
        </FormItem>
        <FormItem
          label="值班领导"
          name="dutyLeaderId"
          rules={[{ required: true, message: '请选择值班领导！' }]}
        >
          <Select
            showSearch
            placeholder="请选择值班领导"
            onChange={(value: any, option:any) => {
              setLeaderName(option.children);
            }}
            filterOption={(input, option) =>
              option?.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            {userList.map((item) => (
              <Option key={item.userId} value={item.userId ?? ''}>
                {item.realName}
              </Option>
            ))}
          </Select>
        </FormItem>
        <FormItem
          label="领导是否确认"
          name="isConform"
        >
          <Radio.Group>
            <Radio value={1} >
              是
            </Radio>
            <Radio value={0}>
              否
            </Radio>
          </Radio.Group>
        </FormItem>
        <FormItem
          label="巡检时间"
          name="patrolTime"
          rules={[{ required: true, message: '请输入巡检时间！' }]}
        >
          <DatePicker placeholder='请选择巡检时间' style={{ width: '100%' }} showTime={true} />
        </FormItem>
      </Form>
    </Modal>
  );
};

export default CreateForm;
